<template>
  <div class="app-container">
    <div>
      <h3 style="font-weight: 700">
        收费项目管理 &nbsp;
        <span style="font-size: 16px; font-weight: 400"
          >用于展示物业收费明细列表信息，以及增加、修改、删除等操作</span
        >
      </h3>
    </div>
    <div>
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :inline="true" label-position="top" label-width="80px">
          <el-form-item label="小区名称">
            <el-select
              placeholder="请选择小区"
              v-model="queryData.community_code"
              @change="changeBuilding"
            >
              <el-option
                v-for="item in communityList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="收费项目">
            <el-select
              placeholder="请选择收费项目"
              v-model="queryData.project_code"
              clearable
            >
              <el-option
                v-for="item in projectList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房产信息">
            <el-select
              placeholder="请选择房产信息"
              v-model="queryData.house_code"
              clearable
            >
              <el-option
                v-for="item in houseList"
                :key="id"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              type="daterange"
              v-model="time"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              @change="timeChange"
            />
          </el-form-item>
          <el-form-item label="操作">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <br />
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-row :gutter="20" type="flex" justify="end">
          <div>
            <el-button type="primary" @click="draForm.isShow = true"
              >新增</el-button
            >
          </div>
        </el-row>
        <br />
        <el-table :data="list">
          <el-table-column label="ID" type="index"> </el-table-column>
          <el-table-column label="小区名称">
            <template #default="{ row }">
              {{ row.community === null ? "" : row.community.name }}
            </template>
          </el-table-column>
          <el-table-column label="收费项目">
            <template #default="{ row }">
              {{
                row.expenses_project === null ? "" : row.expenses_project.name
              }}
            </template>
          </el-table-column>
          <el-table-column label="房产信息">
            <template #default="{ row }">
              {{
                row.house === null || row.building === null
                  ? "未知"
                  : row.building.name +
                    "栋" +
                    row.house.name +
                    `【${row.house.owner_name}】`
              }}
            </template>
          </el-table-column>
          <el-table-column label="应收金额" prop="amount_total">
          </el-table-column>
          <el-table-column label="实收金额" prop="amount_paid">
          </el-table-column>
          <el-table-column label="备注" prop="remark"> </el-table-column>
          <el-table-column label="创建时间" prop="create_time">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="draForm.replayInfo(row.id)"
                >编辑</el-button
              >
              <el-popconfirm title="确定要删除吗" @confirm="delRow(row.id)">
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="20" type="flex" justify="end">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            v-model:current-page="queryData.current"
            :page-sizes="[10, 20, 30, 40]"
            v-model:page-size="queryData.pageSize"
            layout=" sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <expensesDra ref="draForm" @updatalist="initData"></expensesDra>
    </div>
  </div>
</template>

<script setup>
import expensesDra from "./expensesDra.vue";
import { onMounted, reactive, ref } from "vue";
import { getUserAdList, delUserAdList } from "@/api/adminUser.js";
import { getHouseInfoList } from "@/api/house.js";
import { getExpensesInfoList } from "@/api/expenses.js";
import { getCommunityList } from "@/api/community_yuan.js";
import { formatDate } from "@/utils/index.js";
import { ElMessage } from "element-plus";

const list = ref([]);
const total = ref();
const time = ref();
const draForm = ref();
const communityList = ref([]);
const projectList = ref([]);
const houseList = ref([]);
const queryData = reactive({
  community_code: "",
  house_code: "",
  project_code: "",
  create_time: "",
  current: 1,
  pageSize: 10,
});

const initData = async () => {
  let {
    data: { rows, count },
  } = await getUserAdList(queryData);
  // console.log(res)
  rows = rows.map((item) => {
    item.create_time = formatDate(item.create_time);
    return item;
  });
  list.value = rows;
  total.value = count;

  let { data } = await getCommunityList();
  communityList.value = data;
};

onMounted(() => {
  initData();
});

// 获取时间数据转换字符串
const timeChange = (val) => {
  // console.log(toRaw(val))
  val = val.map((item) => (item = +new Date(item))).join(",");
  queryData.create_time = val;
};

const changeBuilding = async () => {
  let { data: house } = await getHouseInfoList(queryData.community_code);
  houseList.value = house;
  let { data: project } = await getExpensesInfoList(queryData.community_code);
  projectList.value = project;
};

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};

// 搜索查询
const onSearch = () => {
  queryData.current = 1;
  initData();
};

// 重置
const onReset = () => {
  Object.assign(queryData, {
    community_code: "",
    house_code: "",
    project_code: "",
    create_time: "",
    current: 1,
    pageSize: 10,
  });
  time.value = "";
  initData();
};

const delRow = async (id) => {
  await delUserAdList(id);
  ElMessage.success("删除成功");
  if (queryData.current > 1 && list.value.length === 1) queryData.current--;
  initData();
};
</script>

<style scoped></style>
